<template>
  <div>
    <el-row>
      <span id="title"><b>交易记录</b></span>
    </el-row>

    <el-row class="shaixuan_1"
            type="flex"
            align="middle"
            style="text-align: center">
      <el-col :span="3">
        <span>交易记录</span>
      </el-col>
      <el-col :span="3"
              :offset="4">
        <el-button type="primary" @click="exportData()">导出数据</el-button>
      </el-col>
      <el-col :span="3">
        <el-button @click="getAll()">全部</el-button>
      </el-col>
      <el-col :span="3">
        <el-button @click="getWeek()">最近一周</el-button>
      </el-col>
      <el-col :span="3">
        <el-button @click="getMonth()">最近30天</el-button>
      </el-col>
      <!-- <el-col :span="5">
        <el-date-picker v-model="value"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        @click="getDate(value)">
        </el-date-picker>
      </el-col> -->
    </el-row>

    <el-row type="flex"
            align="middle"
            class="shaixuan_20"
            style="text-align: center">
      <el-col :span="8"><b><span class="countComputed">销售总额<div>{{sumOfSales}}</div></span></b></el-col>
      <el-col :span="8"><b><span class="countComputed">有效订单<div>{{countOfEffectiveOrder}}</div></span></b></el-col>
      <el-col :span="8"><b><span class="countComputed">有效订单总额<div>{{sumofEffectiveOrderSales}}</div></span></b></el-col>
    </el-row>
    <el-row type="flex"
            align="middle"
            id="data_1">
      <el-col>
        <i class="iconfont icon-querylist"></i>
        <span>数据列表</span>
      </el-col>
    </el-row>
    <el-row>
      <el-menu default-active="/index/tradingRecord/successRecord"
               class="el-menu-demo"
               mode="horizontal"
               router>
        <el-menu-item index="/index/tradingRecord/successRecord"
                      class="menu"
                      >成交记录</el-menu-item>
        <el-menu-item index="/index/tradingRecord/refundRecord"
                      class="menu"
                      >退款记录</el-menu-item>
      </el-menu>
    </el-row>
    <el-row>
      <router-view></router-view>
      <!-- <successRecordVue></successRecordVue> -->
    </el-row>

    //数据显示页面
    
    <el-dialog title=""
               :visible.sync="visible"
                >
      <el-table :model="table"
                ref="editForm"
                :data="tableData">
        <el-table-column prop="dealSerialNumber"
                      label="交易流水号"
                      :label-width= "100">
        </el-table-column>
        <el-table-column prop="username"
                      label="转账金额"
                      :label-width="100">
        </el-table-column>
        <el-table-column prop="transactionAmount"
                      label="交易金额"
                      :label-width="100">
        </el-table-column>
        <el-table-column prop="source"
                      label="来源"
                      :label-width="100">
        </el-table-column>
        <el-table-column prop="paymentMethod"
                      label="支付方式"
                      :label-width="100">
        </el-table-column>
        <el-table-column prop="transactionStatus"
                      label="交易状态"
                      :label-width="100">
        </el-table-column>
        <el-table-column prop="tradingTime"
                      label="交易时间"
                      :label-width="100">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>

import successRecordVue from './successRecord.vue'
import refundRecordVue from './refundRecord.vue'
 

export default {
  data () {
    return {
      sumOfSales: 0,
      countOfEffectiveOrder: 0,
      sumofEffectiveOrderSales: 0,
      value:'',
      tableData:[{
        dealSerialNumber:'',
        username:'',
        transactionAmount:'',
        source:'',
        paymentMethod:'',
        transactionStatus:'',
        tradingTime:''
      }],
      //页面显示
      visible: false,
    }
  },
 components: {
    successRecordVue,
    refundRecordVue
  },
  //创建完毕
  mounted () {
    this.getsuccess();

    this.$axios.get("/finance/deal/sum").then(res => {
        
            this.sumOfSales = res.data
    });
    this.$axios.get("/finance/deal/num").then(res => {

        this.countOfEffectiveOrder = res.data
    });
    this.$axios.get("/finance/deal/effectSum").then(res => {

        this.sumofEffectiveOrderSales = res.data
    });
  },
   // 定义方法
  methods: {
    getsuccess(){
        this.$axios.get("/finance/deal/").then((res) => {
            if(res.data.code == 200){
                console.log(res);
                this.pageparm.total = res.data.data.total;
            }else{
                this.$message({type: 'info',message: res.data.message})
            }
        })
        .catch(err => {
            this.$message.error('数据加载失败，请稍后再试！')
        })
    },

    getrefund() {
      this.$axios.get("/finance/deal/refund" )
      .then(res => {
        if (res.data.code == 200) {
           this.tableData = res.data.data
          
        }else{
           this.$message({type: 'info',message: res.data.message})
        }
      })
      .catch(err => {
          this.$message.error('数据加载失败，请稍后再试！')
      })
    },

 //导出数据详情
    exportData(){
        this.visible = true;
        this.getAll();
        this.$axios.get("/finance/deal/export",{
        responseType: 'blob'
      }).then(response=> {
        //通过header中获取返回的文件名称
        let fileName = response.headers['content-disposition'].split(";")[1].split("filename=")[1]
        let blob = new Blob([response.data], { type: "application/vnd.ms-excel" })
        let downloadElement = document.createElement("a")
        var href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        //指定下载的文件的名称，切记进行decode
        downloadElement.download = decodeURI(fileName)
        document.body.appendChild(downloadElement)
        downloadElement.click()
        //移除临时创建对象，释放资源
        document.body.removeChild(downloadElement)
        window.URL.revokeObjectURL(href)
      });
    },
    getAll(){
        this.visible = true;
        this.$axios.get("/finance/deal/")
        .then(res => {
            if (res.data.code === 200) {
                this.tableData = res.data.data
            }
        })
        .catch()
    },
    

    getWeek(){
        this.title = "近7天数据";
        this.visible = true;
        this.$axios.get("/finance/deal/week")
        .then(res => {
            if (res.data.code === 200) {
                this.tableData = res.data.data
            }
        })
        .catch()
    },
    getMonth(){
        this.title = "近30天数据";
        this.visible = true;
        this.$axios.get("/finance/deal/month")
        .then(res => {
            if (res.data.code === 200) {
                this.tableData = res.data.data
            }
        })
        .catch()
    },
    getDate(value){
        this.title = "后台数据";
        this.visible = true;
        this.$axios.get("/finance/deal/date")
        .then(res => {
            if (res.data.code === 200) {
                this.tableData = res.data.data
            }
        })
        .catch()
    }

    }
}
</script>
<style scoped>
#title {
  font-size: 30px;
}
.shaixuan_1 {
  margin-top: 20px;
  margin-bottom: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
.shaixuan_2 {
  height: 50px;
}
#data_1 {
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  background-color: rgb(241, 241, 241);
}
.menu {
  width: 50%;
  text-align: center;
}
.countComputed {
  font-size: 2em;
}
</style>